<!-- ticketname表格模块 -->
<template>
    <div class="component component--module tickers-table ">
        <div class="column column--full">
            <div class="element element--ticker">
                <div class="overflow--table">
                    <table class="table table--overflow align--right">
                        <thead>
                            <tr class="table__row">
                                <th class="table__heading"></th>
                                <th class="table__heading align--left">Ticker</th>
                                <th class="table__heading align--left">Name</th>
                                <th class="table__heading">Last</th>
                                <th class="table__heading">Chg</th>
                                <th class="table__heading">Chg %</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table__row" v-for="item in props.tickerNameData" :key="item.uuid">
                                <td class="table__cell w2">
                                    <small class="status status--closed"><i
                                            :class="['icon', item.type === '1' ? '' : 'icon-star']"></i></small>
                                </td>
                                <td class="table__cell w10 align--left">
                                    <div class="link" @click="pushDetail(item)"> {{ item.symbol }}
                                    </div>
                                </td>
                                <td class="table__cell u-secondary w55 align--left">
                                    <a class="link overflow--ellipsis">{{ item.name }}</a>
                                </td>
                                <td class="table__cell w10">
                                    <bg-quote class="ignore-color">{{ item.close }}</bg-quote>
                                </td>
                                <td class="table__cell w10">
                                    <bg-quote field="change" class="positive">{{ item.change_money }}</bg-quote>
                                </td>
                                <td class="table__cell w10">
                                    <bg-quote class="positive">{{ item.change_ratio }}%</bg-quote>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
const props = defineProps(['tickerNameData'])
import { useRouter } from 'vue-router'
const router = useRouter()
const pushDetail = (data) => {
    router.push({ name: 'stockDetail', params: { symbol: data.symbol } })
}
</script>
<style scoped lang='scss'>
.icon:before {
    content: "\e937";
    color: #2e2e2e;
    border: none;
}

.icon-star:before {
    content: "\e923";
    padding-right: 2.5px;
    color: #fcb839;
}
</style>